<!-- 合格率 -->
<div class="layuimini-container">

	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<!-- 搜索 -->
		<form class="layui-form" action="">
			<div class="layui-inline">
				<label class="layui-form-label"> 所属总店</label>
				<div class="layui-input-inline">
					<select name="mainStore" id="mainStore" lay-filter="mainStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label"> 所属分店</label>
				<div class="layui-input-inline">
					<select name="subStore" id="subStore" lay-filter="subStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">筛选日期</label>
				<div class="layui-input-inline">
					<input class="layui-input" placeholder="开始日" name="start" id="start" autocomplete="off"/>
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input class="layui-input" placeholder="截止日" name="end" id="end" autocomplete="off"/>
				</div>
			</div>

			<!-- 搜索按钮 -->
			<div class="layui-inline">
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="layui-icon">&#xe615;</i>查询</button>
				<button type="submit" id="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="layui-icon"></i>导出报表</button>
			</div>
		</form>
	</div>

	<!-- 检测项合格率报表 -->
	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<h2 id="axs" align="center" style="margin-bottom:30px;"></h2>
		<table cellpadding="3" width="90%" cellspacing="3" style="height: 400px; margin-left:5%;">
			<tbody id="table-search"></tbody>
		</table>
	</div>

	<!-- 图形化报表 -->
	<div class="layuimini-main" style="margin: 10px; padding:10px;">
		<div id="myChart" style="height: 600px; margin-left:auto; margin-right:auto;"></div>
	</div>


</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<!-- 图形化报表 -->
<script src="js/lay-module/echarts/echarts.js"></script>
<script type="text/javascript">
	function getMax(data) {
		return data.length + 2;
	}
	
	function startTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(1);
		data+=myDate.getDate();
		return data;
	}
	
	function endTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(0);
		data+=myDate.getDate();
		return data;
	}

	function getTime(obj) {
		var name = [];
		for (var i = 0; i < obj.length; i++) {
			name[i] = obj[i].medicalName;
		}
		const set = new Set(name);
		return [...set];
	}

	function getSeries(obj, data) {
		var series = [];
		var bar1 = [];
		var bar0 = [];
		var bar = [];
		var name = getTime(data);
		for (var i = 0; i < name.length; i++) {
			var n = 0;
			var v = 0;
			for (var j = 0; j < data.length; j++) {
				if (data[j].medicalStatus == 0 && name[i] == data[j].medicalName) {
					v += 1;
				} else if (data[j].medicalStatus == 1 && name[i] == data[j].medicalName) {
					n += 1;
				}
			};
			bar1[i] = n;
			bar0[i] = v;
			// var cnm = Number((n/(n+v))*100).toFixed(1);
			bar[i] = (n / (n + v)).toFixed(2);
		}
		// [{
		// 		name: '合格',
		// 		type: 'bar',
		// 		data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 74, 56, 32.6, 20.0, 6.4]
		// 	},
		// 	{
		// 		name: '不合格',
		// 		type: 'bar',
		// 		data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 55, 85, 48.7, 18.8, 6.0]
		// 	},
		// 	{
		// 		name: '合格率',
		// 		type: 'line',
		// 		yAxisIndex: 1,
		// 		data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0]
		// 	}
		// ]
		series[0] = {
			name: '合格',
			type: 'bar',
			data: bar1
		};
		series[1] = {
			name: '不合格',
			type: 'bar',
			data: bar0
		};
		series[2] = {
			name: '合格率',
			type: 'line',
			yAxisIndex: 1,
			data: bar
		};
		return series;
	}

	function init(obj) {
		$.ajax({
			url: 'http://localhost:8004/sccReportList/hgl',
			type: 'post',
			data: {
				"data": JSON.stringify(obj)
			},
			success: function(result) {
				if (result.success) {
					var data = result.data;
					// 基于准备好的dom，指定样式infographic,初始化echarts实例
					var myChart = echarts.init(document.getElementById('myChart'), 'infographic');
					option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#999'
								}
							}
						},
						toolbox: {
							feature: {
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						legend: {
							data: ['合格', '不合格', '合格率']
						},
						xAxis: [{
							type: 'category',
							data: getTime(data),
							// data: ['BMI', '血压', '总胆固醇', '血糖', '糖化血红\\蛋白', '高密度脂蛋白\\固醇', '血硐', '低密度脂蛋白\\胆固醇', '总胆高密比值', '甘油三脂', '血尿酸'],
							/*data:[
										'BMI','\n','血压','\n','总胆','\n固醇','糖化血红','\n蛋白',
										'高密度脂','\n蛋白胆固醇','血硐','\n','低密度脂','\n蛋白胆固醇','总胆高','\n密比值',
										'甘油三脂','\n','血尿酸','\n' ],*/
							axisPointer: {
								type: 'shadow'
							}
						}],
						yAxis: [{
								type: 'value',
								name: '检测数据',
								min: 0,
								max: 250,
								interval: 50,
								axisLabel: {
									formatter: '{value} ml'
								}
							},
							{
								type: 'value',
								name: '人数',
								min: 0,
								max: getMax(data),
								interval: 5,
								axisLabel: {
									formatter: '{value} '
								}
							}
						],
						series: getSeries(obj, data)
					};
					<!--使用指定的配置项和数据显示图表-->
					myChart.setOption(option);
					console.log(data);
					var tbody = document.getElementById("table-search");
					var name = getTime(data);
					var p = 0;
					var str = "";
					var pd = true;
					for (var i = 0; i < name.length; i++) {
						if (pd) {
							str += "<tr>";
							pd = false;
						}
						p++;
						var t = 0;
						var f = 0;
						for (var j = 0; j < data.length; j++) {
							if (data[j].medicalName == name[i] && data[j].medicalStatus == 1) {
								t++;
							} else if (data[j].medicalName == name[i] && data[j].medicalStatus == 0) {
								f++;
							}
						}
						var h = (t / (t + f) * 100) + "%";
						str += "<td style=\"padding-left:10px; padding-right:10px;\">" +
							"<font>" + name[i] + "</font>" +
							"<font style=\"float: right;\">" + t + "/" + (t + f) + "人</font>" +
							"<div class=\"layui-progress layui-progress-big\" lay-filter=\"demo\" lay-showPercent=\"true\">" +
							"<div class=\"layui-progress-bar\" lay-percent=\"" + h + "\"></div>" +
							"</div>" +
							"</td>";
						if (p % 3 == 0) {
							str += "</tr>";
							pd = true;
						} else if (name.length - i == 1) {
							str += "</tr>";
						}
					}
					tbody.innerHTML = str;
					layui.use('element', function() {
						var element = layui.element;
						element.init();
					});
				}
			}
		});
	}
</script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate,
			element = layui.element;

		//渲染form表单
		form.render();
		//日期
		laydate.render({
			elem: '#start'
		});

		laydate.render({
			elem: '#end'
		});
		form.on('select(mainStore)', function(data) {
			var str = document.getElementById("mainStore").value;
			if (str != "") {
				$.ajax({
					url: 'http://localhost:8004/sccPatient/subStore',
					type: 'get',
					async: false,
					data: {
						"mainStoreCode": str
					},
					success: function(result) {
						var data = result.data;
						var subStore = document.getElementById("subStore");
						for (var i = 0; i < data.length; i++) {
							var option = document.createElement("option");
							option.setAttribute("value", data[i].storeCode);
							option.innerText = data[i].storeName;
							subStore.appendChild(option);
						}
						form.render("select");
					}
				});
			}
		});
		layer.ready(function() {
			$.ajax({
				url: 'http://localhost:8004/sccPatient/mainStore',
				type: 'get',
				async: false,
				success: function(result) {
					var data = result.data;
					var mainStore = document.getElementById("mainStore");
					for (var i = 0; i < data.length; i++) {
						var option = document.createElement("option");
						option.setAttribute("value", data[i].storeCode);
						option.innerText = data[i].storeName;
						mainStore.appendChild(option);
					}
					form.render("select");
				}
			});
		});
		form.on('submit(data-search-btn)', function(data) {
			var result = data.field;
			if (result.start == "" && result.end == "") {
				layer.msg("请选择合格率筛选的开始日期和截止日期");
				return false;
			};
			Date.prototype.toLocaleString = function() {
				undefined
				return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日";
			};
			var axs = document.getElementById("axs");
			var oldTime = (new Date(result.start)).getTime();
			var unixTimestamp = new Date(oldTime * 1);
			commonTime = unixTimestamp.toLocaleString();
			var oldTime1 = (new Date(result.end)).getTime();
			var unixTimestamp1 = new Date(oldTime1 * 1);
			commonTime1 = unixTimestamp1.toLocaleString();
			axs.innerText = "合格率报表(" + commonTime + "-" + commonTime1 + ")";
			init(data.field);
			return false;
		});
		
		layer.ready(function(){//初始化加载
			var data={};
		  	data.start=startTime();
			data.end=endTime();
			var axs = document.getElementById("axs");
			axs.innerText = "合格率报表(" + data.start + "-" + data.end + ")";
			init(data);
		});

	});
</script>
